import { STable, SButton } from "@cnjingx/antd-components";
import { Form } from "antd";
import NButton from "@/components/n-button/index.jsx";
import { useState } from "react";
import { useNavigate, Outlet } from "react-router-dom";

export const formItems = [
  {
    label: "客户名称",
    name: "name1",
  },
  {
    label: "证件号码",
    name: "name2",
  },

  {
    label: "查询人员",
    name: "name3",
  },

  {
    label: "查询状态",
    name: "name4",
  },
];

export const getColumns = (navigate) => {
  return [
    {
      title: "客户名称",
      dataIndex: "customerName",
      key: "customerName",
    },
    {
      title: "证件号码",
      key: "customerName1",
    },
    {
      title: "查询时间",
      key: "customerName2",
    },
    {
      title: "查询状态",
      key: "customerName3",
    },
    {
      title: "查询人员",
      key: "customerName4",
    },
    {
      title: "操作",
      key: "action",
      render: (_, row, idx) => {
        return (
          <>
            <SButton
              type="link"
              size="small"
              onClick={() => {
                navigate("/search/credit-report/report-detail", {
                  state: { id: row.id },
                });
              }}
            >
              查看
            </SButton>
          </>
        );
      },
    },
  ];
};

export function Component() {
  const navigate = useNavigate();
  const [totals, setTotals] = useState(30);
  const [page, setPage] = useState(1);
  const [tableForm] = Form.useForm();

  const data = Array.from({ length: 30 }, (x, i) => {
    return {
      id: Math.random(),
      customerName: `客户名称${i}`,
    };
  });
  const toDetail = () => {};
  const onReset = () => {
    tableForm.resetFields();
    //Todo：重置queryFn(1)
  };
  const _columns = getColumns(navigate);

  return (
    <>
      <STable
        form={tableForm}
        formItems={formItems}
        columns={_columns}
        rowKey="id"
        dataSource={data}
        total={totals}
        page={page}
        onReset={onReset}
      >
        <div
          className={"pb-8"}
          style={{ display: "flex", justifyContent: "flex-end" }}
        ></div>
      </STable>
      <Outlet />
    </>
  );
}
